<template>
  <div class="notice">
    <div class="back">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="listbox" v-for="item in listdata" :key="item.id">
          <p class="title">
            <span>{{item.top}}</span>
            <span style="font-size:14px;color:#ccc">{{item.create_time}}</span>
          </p>
          <span v-html="item.content"></span>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { bulletin_list } from '../api/api';
export default {
  data(){
    return{
      listdata:[],
      page:0,
      loading: false,
      finished: false
    }
  },
  methods:{
    onLoad() {
      this.page++
      let params = {
            page:this.page,
            page_size:10
          }
      this.loading = true
      bulletin_list(params).then(res=>{
        console.log('通知列表',res)
        if(res.Status == 200){
          let temp = res.Data
          let ipos
          temp.forEach(item => {
            ipos = item.create_time.indexOf("+")
            item.create_time = item.create_time.replace(/T/g," ").substring(0,ipos)
            this.listdata.push(item)
          });
        }
        this.loading = false
        if (this.listdata.length >= res.Count) {
          this.finished = true
        }
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
.notice{
  height 100%
  .back{
    height 100%
    background url(../assets/img/notice.jpg) no-repeat top center
    background-size cover
    overflow hidden
    padding-top 120px
    .listbox{
      padding 15px
      margin 0 16px 10px
      border-radius 6px
      box-shadow 0px 0px 10px #f6f6f6
      font-size 12px
      background #ffffff
      color #333
      .title{
        display flex
        justify-content space-between
        align-items center
        font-size 16px
        margin 10px 0
      }
    }
  }
}
</style>

